.back-top {
  position: fixed;
  right: 20px;
  bottom: -100px;
  color: var(--main-color);
  font-size: 40px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 1s;

  &:hover {
    .fire {
      display: block;
    }
  }

  .fire {
    position: absolute;
    bottom: -8px;
    left: 12px;
    transform: rotate(180deg);
    display: none;
    animation: fireMov 0.5s infinite;
  }
  @keyframes fireMov {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes goTop {
    0% {
      bottom: 100px;
    }
    100% {
      bottom: 120%;
      // display: none;
    }
  }

  @keyframes topMov {
    0% {
      transform: rotateY(0);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
}
.back-top.mov {
  animation: topMov 0.3s linear infinite, goTop 1s;
  .fire {
    display: block;
  }
}
.back-top.mov {
  animation: topMov 0.3s linear infinite, goTop 1s;
  .fire {
    display: block;
  }
}
.back-top.hide {
  animation: topMov 0.3s linear infinite, goTop 1s;
  .fire {
    display: block;
  }
}
